/*
 * @Author: syyao 
 * @Date: 2019-05-17 15:22:26 
 * @Last Modified by: syyao
 * @Last Modified time: 2019-06-12 21:45:08
 */
<template>
    <div id="pictureView">
        <div v-masonry transition-duration="0.1" item-selector=".item">
            <div v-masonry-tile class="item" v-for="(image,index) in images" :key="index">
                <div class="pic" style="width:20vw">
                    <div>
                        <img
                            name="picture"
                            :id="image.id"
                            :src="image.picturepath"
                            @click="showDetail(image)"
                        >
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="modal1" title="图片信息" :footer-hide="true" width="40" style="background">
            <div style="text-align:center">
                <img name="picture" :src="detail.path" style="max-width: 100%;max-height: 30vw">
            </div>
            <div style="margin:0 auto;width:90%;margin-bottom:4vw;" v-if="isLogin===true">
                <Row>
                    <i-col span="10">
                        <div style="margin-top:0.6vw;">
                            <span style="margin-left: 0.5vw;font-size: 1.3vw;font-weight: bold;"></span>
                        </div>
                    </i-col>
                    <i-col span="12">
                        <div style="margin-top:0.6vw;text-align:right;margin-right:0.5vw">
                            <img
                                src="../assets/tab.png"
                                style=" width: 1vw;vertical-align: middle;margin-right:0.4vw;margin-top:-0.3vw"
                            >
                            <span
                                style="font-size: 1vw;margin-right:0.2vw"
                                v-for="(tag,index) in pictureInfo.tagList"
                                :key="index"
                            >{{tag}}</span>
                        </div>
                    </i-col>

                    <i-col span="2">
                        <!-- <Button
                            v-if="pictureInfo.like===false"
                            type="primary"
                            style="width:5vw;margin-left:2vw;"
                            v-on:click="like()"
                        >喜 欢</Button>
                        <Button
                            v-else
                            type="primary"
                            style="width:5vw;margin-left:2vw;"
                        >喜 欢</Button>-->
                        <div style="margin-top:0.5vw;margin-left:2vw">
                            <Icon
                                v-if="pictureInfo.like===false"
                                v-on:click="like()"
                                type="ios-heart-outline"
                                size="30"
                            />
                            <Icon
                                v-else
                                type="ios-heart"
                                v-on:click="like()"
                                size="30"
                                color="red"
                            />
                        </div>
                    </i-col>
                </Row>
            </div>

            <div
                style="border-top: 1px solid #dcdee2;border-color:#e8eaec;width: 100%;position: absolute;bottom: 0;left: 0;"
                v-if="isLogin===true"
            >
                <Row>
                    <i-col span="3" style="height:3.79vw">
                        <img
                            style="width: 3.5vw;margin-top: 0.2vw;margin-left:1vw; border-radius: 3vw;border:#2b85e4 2px solid;"
                            :src="pictureInfo.headpicture"
                        >
                    </i-col>
                    <i-col span="5" style="margin-top:0.4vw">
                        <p
                            style="margin-left: 0.8vw; margin-top: 0.6vw;font-size: 1.1vw;font-weight: bold;"
                        >{{pictureInfo.nickname}}</p>
                        <!-- <p style="margin-left: 0.8vw; margin-top: 0.2vw;font-size: 0.5vw;">
                            发布图片
                            <span style="color:#1DACFF;margin-left:0.1vw">123</span>
                        </p>-->
                    </i-col>
                    <i-col span="16" style="margin-top:0.9vw;text-align:right;">
                        <Button
                            @click="downloadPicture(pictureInfo.picturepath)"
                            icon="md-download"
                            style="margin-right:0.5vw;width:3vw;font-size:0.5vw"
                        ></Button>
                        <Button
                            type="success"
                            style="width:5vw;font-size:0.5vw"
                            v-on:click="evokeVisitorFilter(pictureInfo.id)"
                        >访 问</Button>

                        <Button
                            v-if="pictureInfo.favorite===false"
                            type="warning"
                            icon="ios-heart-outline"
                            style="margin-left:0.8vw;margin-right:1.5vw;width:5.2vw;font-size:0.5vw"
                            v-on:click="star()"
                        >收藏图片</Button>
                        <Button
                            v-else
                            type="warning"
                            icon="ios-heart"
                            style="margin-left:0.8vw;margin-right:1.5vw;width:5.2vw;font-size:0.5vw"
                            v-on:click="unstar()"
                        >取消收藏</Button>
                    </i-col>
                </Row>
            </div>

            <div
                style="margin:0 auto;width:90%;margin-bottom:2vw;text-align: center;"
                v-if="isLogin!==true"
            >
                <Button style="margin-top:2vw" v-on:click="login">登录查看更多信息</Button>
            </div>
        </Modal>
        <contextmenu
            class="right-menu"
            :right_click_filter="rightClickFilter"
            :target="contextMenuTarget"
            :show="contextMenuVisible"
            @update:show="(show) => contextMenuVisible = show"
            @update:e="(e)=>chooseE=e"
        >
            <a @click="download">下载</a>
            <a @click="starInContext">收藏</a>
            <a @click="reportInContext">举报</a>
        </contextmenu>
    </div>
</template>

<script>
import pic1 from "../assets/l-bj.jpg";
import pic2 from "../assets/l-bj1.jpg";
export default {
  name: "PictureView",
  data() {
    return {
      images: [
        {
          id: "",
          picturepath: ""
        }
      ],
      modal1: false,
      contextMenuVisible: false,
      contextMenuTarget: undefined,
      chooseE: undefined,
      detail: {
        path: "",
        id: ""
      },
      pictureInfo: {},
      isLogin: false
    };
  },
  created() {
    this.images = this.pictureList;
    this.isLogin = this.$store.state.user.isLogin;
  },
  props: {
    pictureList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  mounted() {
    this.contextMenuTarget = document.body;
  },
  watch: {
    pictureList: function(newVal) {
      this.images = newVal;
    },
    "$store.state.user.isLogin": function(newVal) {
      this.isLogin = newVal;
    }
  },
  methods: {
    showDetail(index) {
      let _this = this;
      this.modal1 = true;
      this.detail.id = index.id;
      this.detail.path = index.picturepath;
      let param = new URLSearchParams();
      param.append("PictureId", index.id);
      this.http.post(this, "/ImageInfor", param).then(function(msg) {
        _this.pictureInfo = { ...msg.data.data };
      });
    },
    evokeVisitorFilter(id) {
      this.$store.commit("setVisitorFilter", id);
    },
    download(e) {
      let url = this.chooseE.srcElement.src;
      let time = new Date();
      fetch(url)
        .then(res => res.blob())
        .then(blob => {
          // 创建隐藏的可下载链接
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = URL.createObjectURL(blob);
          a.download = "iSee" + time.getTime() + ".png";
          document.body.appendChild(a);
          a.click();
          // 移除元素
          document.body.removeChild(a);
        });

      this.contextMenuVisible = false;
    },
    rightClickFilter(e) {
      console.log(e);
      if (e.target.nodeName.toLowerCase() === "img") {
        return false;
      }
    },
    starInContext() {
      let id = this.chooseE.srcElement.id;
    },
    reportInContext() {
      let id = this.chooseE.srcElement.id;
    },
    like() {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("PictureId", this.detail.id);
      this.http.post(this, "/likepicture", Params).then(function(msg) {
        _this.pictureInfo.like = !_this.pictureInfo.like;
      });
    },
    downloadPicture(url) {
      let time = new Date();
      fetch(url)
        .then(res => res.blob())
        .then(blob => {
          // 创建隐藏的可下载链接
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = URL.createObjectURL(blob);
          a.download = "iSee" + time.getTime() + ".png";
          document.body.appendChild(a);
          a.click();
          // 移除元素
          document.body.removeChild(a);
        });
    },
    star() {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("pictureId", this.detail.id);
      Params.append("favoriteID", this.$store.state.user.starId);
      this.http.post(this, "/favorite", Params).then(function(msg) {
        _this.pictureInfo.favorite = true;
      });
    },
    unstar() {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("pictureId", this.detail.id);
      Params.append("FavoriteId", this.$store.state.user.starId);
      this.http.post(this, "/cancelFavorite", Params).then(function(msg) {
        _this.pictureInfo.favorite = false;
      });
    },
    login() {
      this.$store.commit("setLoginFilter");
      this.modal1 = false;
    }
  }
};
</script>

<style scoped>
.pic {
  box-sizing: border-box;
  display: inline-block;
  margin-top: 10px;
  padding: 0.5vw;
}

.pic div {
  border-radius: 8px;
  overflow: hidden;
}

.pic div:hover {
  /*background-color: rgba(192, 192, 192, 0.30);*/
}

.pic img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: all 1s;
}

.pic img:hover {
  transform: scale(1.1);
}

.right-menu {
  position: fixed;
  background: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  z-index: 9999;
  display: none;
}

.right-menu a {
  width: 75px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  display: block;
  color: #1a1a1a;
}

.right-menu a:hover {
  background: #eee;
  color: #fff;
}

.right-menu {
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}

a {
  text-decoration: none;
}

.right-menu a {
  padding: 2px;
}

.right-menu a:hover {
  background: #42b983;
}
</style>
